<template>
    <div id="user">
       <!-- 搜索栏 -->
       <el-card id="search">
            <el-row>
                <el-col :span="20">
                    <el-input v-model="searchModel.userName" placeholder="用户名"  clearable style="width: 200px;" class="filter-item"></el-input> <!-- style="width: 200px;" class="filter-item"   换行否 -->
                    <el-input v-model="searchModel.phone" placeholder="电话"  clearable style="width: 200px;" class="filter-item"></el-input>
                    <el-button @click="getUserList()" type="primary" round   icon="el-icon-search">查询</el-button>
                </el-col>
                <el-col :span="3"> <!-- span  3  左右位置 -->
                <el-button @click="openEditUI(null)" type="primary" icon="el-icon-plus" circle></el-button>
                </el-col>
            </el-row>
        </el-card>
         <!-- 结果列表 -->
        <el-card>
            <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>

            <el-table-column  label="序号">
            <template v-slot="scope">
                {{ (searchModel.pageNo-1)*searchModel.pageSize + scope.$index + 1 }}
            </template>
            </el-table-column>
            <el-table-column prop="id" label="用户ID" ></el-table-column>
            <el-table-column prop="userName" label="用户名" ></el-table-column>
            <el-table-column prop="phone" label="电话" ></el-table-column>
            <el-table-column prop="status" label="状态" ></el-table-column>
            <el-table-column prop="email" label="电子邮箱" ></el-table-column>
            <el-table-column label="操作" >
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="openEditUI(scope.row.id)">编辑</el-button>
                    <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
            </el-table>
        </el-card>

       


        <!--分页组件 -->
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchModel.pageNo"
        :page-sizes="[5,10,20,50]"
        :page-size="searchModel.pageSize"
        layout="total,sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
            <!-- 新增标签弹层 -->
        <el-dialog title="新增人员" :visible.sync="dialogFormVisible">

                <el-form ref="dataAddForm" :model="formData"  :rules="rules" label-position="right" :label-width="formLabelWidth">

                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="用户名" prop="userName" :labelWidth="formLabelWidth">
                                <el-input v-model="formData.userName"  autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="密码" prop="passWord" :labelWidth="formLabelWidth">
                                <el-input v-model="formData.passWord"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="联系电话" prop="phone" :labelWidth="formLabelWidth">
                                <el-input v-model="formData.phone"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="状态"prop="status" :labelWidth="formLabelWidth" >
                                <el-switch
                                v-model="formData.status"
                                :active-value="1"
                                :inactive-value="0"> 
                               </el-switch>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>   
                            <!--   <el-col> 单独行部分 </el-col> -->
                            <el-form-item label="用户角色":label-Width="formLabelWidth">
                                <el-checkbox-group 
                                style="width: 85%;"
                                v-model="formData.roleIdList"
                                :min="1"
                                :max="2">
                                <el-checkbox v-for="role in roleList" :label="role.roleId" :key="role.roleId">{{role.roleDesc}}</el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                    </el-row>
                    <el-row>
                        <el-col :span="15">
                            <el-form-item label="电子邮箱":labelWidth="formLabelWidth">
                                <el-input v-model="formData.email" ></el-input>
                            </el-form-item>
                        </el-col>

                    </el-row>
                    
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancel()">取消</el-button>
                    <el-button type="primary" @click="saveUser()">确定</el-button>
                </div>
        </el-dialog>
    </div>
</template>
<script>

import userManageAPI from '@/api/userManage'
import roleAPI from '@/api/roleManage'
export  default{
    data() {
            return {
                roleList:[],
                formLabelWidth: "130px",
                dialogFormVisible: false,//添加表单是否可见
                dialogFormVisible4Edit:false,//编辑表单是否可见
                formData: {
                    roleIdList: []     //角色信息
                },//表单数据
                total: 0,
                searchModel:{
                    pageNo: 1,
                    pageSize: 10
                },
              
                dataList: [],  //当前页要展示的列表数据
                rules: {//校验规则
                userName: [{ required: true, message: '请输入角色名称', trigger: 'blur' },
                            {
                            min: 2,
                            max: 20,
                            message: "长度在2-20个字符",
                            trigger: 'blur'
                            },
                ],
                phone: [{ required: true, message: '联系电话为必填项', trigger: 'blur' }]
                }
            }

        },
        methods:{
            getAllRoleList(){
              roleAPI.getAllRoleList().then(Response=>{
                this.roleList= Response.data;
               // console.log(this.roleList);
              })
            },
           //添加    -- this.$refs.dataAddForm.validate((valid)=>{ ---数据验证
           saveUser() {
                //触发表单验证
                this.$refs.dataAddForm.validate((valid)=>{ 
                    if(valid){
                        // 提交请求给后台
                        userManageAPI.saveUser(this.formData).then(response =>{
                        // 成功提示
                         this.$message.success(response.msg);
                        //修改成功关闭窗口   false
                        this.dialogFormVisible = false;
                        // 刷新表格
                        this.getUserList();
                        });
                    }else{
                        console.log("error submit!!");
                        return false;
                    }
                
                });
            },
            // 删除
            handleDelete(user) {
                this.$confirm("次操作永久删除，是否继续？", "提示", {   //confirm  防手抖
                    type: "info"
                }).then(() => {
                    userManageAPI.delleteUser(user.id).then(response =>{
                        this.$message.success(response.msg);
                    }).finally(() => {
                        //2.重新加载数据
                        this.getUserList();
                    });
                }).catch(() => {
                    this.$message.info("取消操作");
                });
            },
                  
           //分页
           handleSizeChange(pageSize){
            this.searchModel.pageSize=pageSize
            this.getUserList();
           },
           handleCurrentChange(pageNo){
            this.searchModel.pageNo=pageNo
            this.getUserList();
           },
          
            //弹出添加窗口
            openEditUI(id) {
                if( id==null){
                this.title='新增角色'
                }else{
                    this.title='修改角色'
                    //根据id查找角色
                    userManageAPI.getUserById(id).then(response=>{ 
                        this.formData=response.data
                       //this.$refs.menuRef.setCheckedKeys(response.data.menuIdList);
                 });
                } 
                this.dialogFormVisible = true;
                this.clearForm(); // 清空表单数据
            },

             //取消
             cancel() {
                this.dialogFormVisible = false;
                this.dialogFormVisible4Edit = false;
                this.$message.success("操作取消！");
            },
            //重置表单
            clearForm() {
                this.formData = { 
                    roleIdList: []
                };
                
                //this.$refs.dataAddForm.clearValidate();
               // this.$refs.menuRef.setCheckedKeys([]);         
            },
            //查询所有
            getUserList(){
            userManageAPI.getUserList(this.searchModel).then(response=>{ 
             this.dataList=response.data.rows;
             this.total=response.data.total;
             
            });
           },
        },
        //钩子函数，VUE对象初始化完成后自动执行
        created(){
            this.getUserList();
            this.getAllRoleList();
        }
};
</script>
<style>
#search .el-input__inner {
    width: 200px;
    margin-right: 10px;
}
</style>
